<template>
  <el-upload
    ref="uploader"
    :multiple="false"
    :limit="limit"
    :drag="isDrag"
    class="uploader-wrap"
    :headers="headers"
    :action="`${$apiHost}/common/fileImgUrl`"
    :on-success="onSuccess"
    :on-progress="beforeU"
    :show-file-list="false"
  >
    <template v-if="!isDrag">
      <el-button
        size="small"
        :style="{ background: headerStyle, color: '#ffffff', border: 'none' }"
        :disabled="disabled"
      >
        {{ title || '上传图片' }}
      </el-button>
    </template>
    <template v-else>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </template>

    <template #tip>
      <div class="img-wrap" style="display: flex; flex-wrap: wrap">
        <template v-if="value.length">
          <div
            v-for="(item, index) in value"
            :key="index"
            class="img-item"
            style="margin-bottom: 8px; width: 50px; height: 50px"
          >
            <el-image
              style="width: 50px; height: 50px"
              :src="host + item"
              :preview-src-list="[host + item]"
              fit="cover"
              class="img-item"
            ></el-image>
            <div class="close" style="top: -5px">
              <i class="el-icon-circle-close" @click="onRemove(index)"></i>
            </div>
          </div>
        </template>

        <!-- <div v-else>
          <span v-if="value.toString()">
            <span style="color: #67c23a">
              <el-icon
                class="el-icon-finished"
                style="font-size: 50px"
              ></el-icon
              >上传成功！</span
            >
            <span @click="_delete"
              ><el-icon class="el-icon-delete" style="font-size: 14px"></el-icon
            ></span>
          </span>
        </div> -->
      </div>
    </template>
  </el-upload>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      host: this.$imgHost,
    }
  },
  props: {
    limit: {
      type: Number,
      default: 1,
    },
    value: {
      type: Array,
      default: [],
    },
    title: {
      type: String,
      default: '',
    },
    limit: {
      type: Number,
      default: 1,
    },
    disabled: { type: Boolean, default: false },
    headerStyle: {
      type: String,
      default: '#409EFF',
    },
    isDrag: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  computed: {
    ...mapState(['token']),
    // 🔹 拼接完整的图片路径
    preImgs() {
      return this.value ? `${this.$imgHost}${this.value}` : ''
    },
    headers() {
      return {
        token: this.token || window.$quinn.getStorage('token'),
      }
    },
  },
  methods: {
    isImage(filename) {
      return /\.(png|jpg|jpeg|img)$/i.test(filename)
    },
    onSuccess(res) {
      console.log('结果', res)

      if (res.code === 200 && res.result) {
        this.$emit('addStatus', 2)
        // const value = [...this.value, res.result[0]] // 后端返回数组，取第一个
        this.value.push(res.result[0])
        this.$emit('change', this.value)
        console.log('this.value', this.value)
      }
    },
    onRemove(i) {
      this.value.splice(i, 1)
      this.$emit('change', this.value) // 清空 value
      if (this.value.length === 0) {
        const ref = this.$refs.uploader
        ref && ref.clearFiles()
      }
    },
    _delete() {
      this.$emit('change', '')
      const ref = this.$refs.uploader
      if (ref) {
        ref.clearFiles()
      }
    },
    beforeU() {
      this.$emit('addStatus', 1)
    },
  },
}
</script>
